"use client"

import { useState } from "react"
import { Button, Image } from "antd"
import { LeftOutlined, MoreOutlined, EnvironmentOutlined, RightOutlined } from "@ant-design/icons"
import "./Order.css"
import { useNavigate } from "react-router-dom"

const Order = () => {
  const [selectedCoupon, setSelectedCoupon] = useState(null)
  const [selectedPayment, setSelectedPayment] = useState(null)

  const orderInfo = {
    address: {
      name: "大爽",
      phone: "18033441849",
      detail: "广东省 深圳市 福田区\n深南大道",
    },
    product: {
      name: "小米12 Pro 天玑版 天玑9000+芯片组 5...",
      specs: "颜色:深蓝色铁金 128G",
      price: 2999,
      quantity: 1,
      image: "/placeholder.svg?height=60&width=60",
    },
    pricing: {
      subtotal: 2999,
      shipping: 0,
      discount: 200,
      couponDiscount: 0,
      pointsDiscount: 0,
    },
    availableCoupons: 0,
  }

  const finalTotal =
    orderInfo.pricing.subtotal +
    orderInfo.pricing.shipping -
    orderInfo.pricing.discount -
    orderInfo.pricing.couponDiscount -
    orderInfo.pricing.pointsDiscount

  const navigate = useNavigate()

  const handleBack = () => {
    console.log("返回")
    navigate(-1)
  }

  const handleMenu = () => {
    console.log("菜单")
  }

  const handleAddressClick = () => {
    console.log("选择收货地址")
  }

  const handleCouponClick = () => {
    console.log("选择优惠券")
  }

  const handlePaymentClick = () => {
    console.log("选择支付方式")
  }

  const handleSubmitOrder = () => {
    console.log("提交订单")
    navigate("/payment")
  }

  return (
    <div className="order-container">
      {/* 顶部导航栏 */}
      <div className="order-header">
        <Button type="text" icon={<LeftOutlined />} className="back-btn" onClick={handleBack} />
        <div className="order-header-title">创建订单</div>
        <Button type="text" icon={<MoreOutlined />} className="menu-btn" onClick={handleMenu} />
      </div>

      {/* 主要内容 */}
      <div className="order-content">
        {/* 收货地址 */}
        <div className="address-section" onClick={handleAddressClick}>
          <div className="address-header">
            <EnvironmentOutlined className="address-icon" />
            <div className="address-info">
              <div className="address-name-phone">
                {orderInfo.address.name} {orderInfo.address.phone}
              </div>
              <div className="address-detail">{orderInfo.address.detail}</div>
            </div>
            <RightOutlined className="address-arrow" />
          </div>
        </div>

        {/* 商品信息 */}
        <div className="product-section">
          <div className="product-header">商品信息</div>
          <div className="product-item">
            <Image
              src={orderInfo.product.image || "/placeholder.svg"}
              alt="商品图片"
              className="product-image"
              preview={false}
            />
            <div className="product-details">
              <div className="product-name">{orderInfo.product.name}</div>
              <div className="product-specs">{orderInfo.product.specs}</div>
              <div className="product-price-quantity">
                <span className="product-price">¥{orderInfo.product.price}</span>
                <span className="product-quantity">x{orderInfo.product.quantity}</span>
              </div>
            </div>
          </div>
        </div>

        {/* 优惠券 */}
        <div className="coupon-section" onClick={handleCouponClick}>
          <div className="coupon-item">
            <div className="coupon-left">
              <div className="coupon-icon">券</div>
              <span className="coupon-text">优惠券</span>
            </div>
            <div className="coupon-right">
              {orderInfo.availableCoupons > 0 && <span className="coupon-count">{orderInfo.availableCoupons}</span>}
              <span className="coupon-placeholder">请选择优惠券</span>
              <RightOutlined className="coupon-arrow" />
            </div>
          </div>
        </div>

        {/* 订单金额 */}
        <div className="order-summary">
          <div className="summary-item">
            <span className="summary-label">商品合计</span>
            <span className="summary-value">¥{orderInfo.pricing.subtotal}</span>
          </div>
          <div className="summary-item">
            <span className="summary-label">运费</span>
            <span className="summary-value free">
              {orderInfo.pricing.shipping === 0 ? "¥0" : `¥${orderInfo.pricing.shipping}`}
            </span>
          </div>
          <div className="summary-item">
            <span className="summary-label">活动优惠</span>
            <span className="summary-value discount">-¥{orderInfo.pricing.discount}</span>
          </div>
          <div className="summary-item">
            <span className="summary-label">优惠券</span>
            <span className="summary-value discount">-¥{orderInfo.pricing.couponDiscount}</span>
          </div>
          <div className="summary-item">
            <span className="summary-label">积分抵扣</span>
            <span className="summary-value discount">-¥{orderInfo.pricing.pointsDiscount}</span>
          </div>
        </div>

        {/* 支付方式 */}
        <div className="payment-section" onClick={handlePaymentClick}>
          <div className="payment-item">
            <span className="payment-label">支付</span>
            <div className="payment-right">
              <span className="payment-placeholder">请选择支付方式</span>
              <RightOutlined className="payment-arrow" />
            </div>
          </div>
        </div>
      </div>

      {/* 底部提交区域 */}
      <div className="order-bottom">
        <div className="order-bottom-content">
          <div className="total-price">
            <span className="total-label">实付款</span>
            <span className="total-amount">¥{finalTotal}</span>
          </div>
          <Button type="primary" className="submit-btn" onClick={handleSubmitOrder}>
            提交订单
          </Button>
        </div>
      </div>
    </div>
  )
}

export default Order
